<template>
	<view class="page">
		<view class="flex0">
			<u-navbar :fixed='false' bgColor="transparent" @leftClick="navBack" title="学生心理健康服务平台">
				<view slot="center" class="navTitle">
					学生心理健康服务平台
				</view>
			</u-navbar>
		</view>
		
		<view class="flex1">
			<scroll-view scroll-y="true" class="scrollView">
				<view class="loginBox">
					<view class="form">
						<view class="ft">
							{{form.userType==2?'家长注册账号':'学生注册账号'}}
						</view>
						<view class="line">
							<view class="in">
								<input type="text" :placeholder="form.userType==2?'请输入家长真实姓名':'请输入学生真实姓名'"
									v-model="form.nickname" />
							</view>
						</view>

						<view class="line" @click="toSelectSchool">
							<view class="in">
								<input type="text" disabled placeholder="请选择学生所在学校" v-model="form.schoolIdName" />
							</view>
						</view>
						<template v-if="form.userType==1">
							<view class="line" @click="toSelectGrade(-1)">
								<view class="in">
									<input type="text" disabled placeholder="请输入学生所在年级" v-model="form.gradeIdName" />
								</view>
							</view>
							<view class="line" @click="toSelectClass(-1)">
								<view class="in">
									<input type="text" disabled placeholder="请输入学生所在班级" v-model="form.classesIdName" />
								</view>
							</view>
						</template>
						<template v-if="form.userType==2">
							<view v-for="(item,index) in students">
								<view style="display: flex;justify-content: space-between;">
									学生{{index+1}}
									<span @click="del(index)" v-if="index>0">删除</span>
								</view>
								<view class="line" @click="toSelectGrade(index)">
									<view class="in">
										<input type="text" disabled placeholder="请输入学生所在年级"
											v-model="item.gradeIdName" />
									</view>
								</view>
								<view class="line" @click="toSelectClass(index)">
									<view class="in">
										<input type="text" disabled placeholder="请输入学生所在班级"
											v-model="item.classesIdName" />
									</view>
								</view>
								<view class="line">
									<view class="in">
										<input type="text" placeholder="请输入学生真实姓名" v-model="item.name" />
									</view>
								</view>
							</view>
							<view @click="toAdd">添加</view>
						</template>
						<template v-if="form.userType==2">

							<view class="line">
								<view class="in">
									<input type="text" placeholder="请输入手机号" v-model="form.mobile" />
								</view>
							</view>
							<view class="line">
								<view class="in">
									<input type="text" placeholder="请输入验证码" v-model="form.captcha" />
								</view>
								<view class="getbtn" @tap="getCode" :class="isSending?'gray':''">
									{{isSending?(time+'s后重新获取'):'获取验证码'}}
								</view>
							</view>
						</template>
						<template v-if="form.userType==1">
							<view class="line">
								<view class="in">
									<input type="text" placeholder="请输入学生学籍号" v-model="form.studentNo" />
								</view>
							</view>
							<view class="line">
								<view class="in">
									<input :type="showPwd?'text':'password'" placeholder="请输入密码"
										v-model="form.password" />
								</view>
								<view class="btn" @tap="showPwd=!showPwd">
									<view class="ic" v-show="showPwd">
										<image src="@/static/images/icon-eye-close.png" mode="widthFix"></image>
									</view>
									<view class="ic" v-show="!showPwd">
										<image src="@/static/images/icon-eye-open.png" mode="widthFix"></image>
									</view>
								</view>
							</view>
							<view class="line">
								<view class="in">
									<input :type="showPwd2?'text':'password'" placeholder="请再次输入密码"
										v-model="form.confirmPassword" />
								</view>
								<view class="btn" @tap="showPwd2=!showPwd2">
									<view class="ic" v-show="showPwd2">
										<image src="@/static/images/icon-eye-close.png" mode="widthFix"></image>
									</view>
									<view class="ic" v-show="!showPwd2">
										<image src="@/static/images/icon-eye-open.png" mode="widthFix"></image>
									</view>
								</view>
							</view>
						</template>
						<view class="iaggree">
							<view class="icheck" :class="isAggree?'checked':''" @tap="isAggree=!isAggree">
								<image src="@/static/images/icon-gou.png" mode="aspectFit"></image>
							</view>
							<view class="p">
								我已阅读 <navigator url="/subpage/single/single?id=6" open-type="navigate" class="a">《用户协议》
								</navigator> 和 <navigator url="/subpage/single/single?id=7" open-type="navigate"
									class="a">《隐私政策》</navigator>
							</view>
						</view>
						<view class="lineBtns">
							<view class="btn act" @tap="submit">
								注册
							</view>
						</view>
						<view class="other">
							<view class="l"></view>
							<view class="r">
								已有账号！ <navigator url="/subpage/student/login/login" class="a" open-type="navigate">去登录
								</navigator>
							</view>
						</view>
					</view>
					<view class="footTip">
						<view class="utip">
							<text>如遇登录问题请点击</text>
							<button type="default" open-type="contact" class="lineNav">联系客服</button>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-picker @cancel="pickerShow=false" :show="pickerShow" :columns="pickerList" keyName="name"
			@confirm="confirmPicker"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPwd: false,
				showPwd2: false,
				isAggree: false,
				schoolList: [],
				gradeList: [],
				classList: [],
				curFiled: 'schoolId',
				pickerList: [
					[]
				],
				isSending: false,
				timer: null,
				time: 60,
				pickerShow: false,
				students: [{
					"gradeId": '',
					"classesId": '',
					"name": "",
					classList: [],
				}],
				curStudent: 0,
				form: {
					nickname: '',
					schoolId: '',
					schoolIdName: '',
					gradeId: '',
					gradeIdName: '',
					classesId: '',
					classesIdName: '',
					studentNo: '',
					password: '',
					confirmPassword: '',
					mobile: '',
					captcha: '',
					userType: 2
				}
			}
		},

		onLoad(e) {
			if (e.type) {
				this.form.userType = e.type
			}
			
			this.$db.clear()
			this.getSchool()
		},
		methods: {
			del(idx) {
				this.students.splice(idx, 1)
			},
			toAdd() {
				
				if (!this.form.schoolId) {
				
					this.$refs.uToast.show({
						message: '请先选择所在学校！',
						type: 'warning',
						position: "top"
					});
					return;
				}
				let item = {
					"gradeId": '',
					"classesId": '',
					"name": "",
					classList: [],
				}
				this.students.push(item)
			},
			getSchool() {

				this.$api.schoolList({}, res => {
					if (res.code == 200) {
						this.schoolList = res.data
					}
				})

			},
			getGrade() {

				this.$api.gradeList({
					deptId: this.form.schoolId
				}, res => {
					if (res.code == 200) {
						this.gradeList = res.data
					}
				})

			},
			getClass() {
				
				let post={}
				
				if (this.form.userType  == 2) {
					post.gradeId=this.students[this.curStudent].gradeId
				}else{
					post.gradeId=this.form.gradeId
				}
				console.log(this.students,this.form.userType ,post,12345)
				this.$api.classesList(post, res => {
					if (res.code == 200) {

						if (this.form.userType  == 1) {

							this.classList = res.data
						} else {
							this.students[this.curStudent].classList = res.data
						}
					}
				})

			},

			toSelectSchool() {
				this.curFiled = 'schoolId'
				this.pickerList = [this.schoolList]
				this.pickerShow = true
			},
			toSelectGrade(idx) {
				console.log(idx, 12222)
				if (idx != -1) {
					this.curStudent = idx
				}
				if (!this.form.schoolId) {

					this.$refs.uToast.show({
						message: '请先选择所在学校！',
						type: 'warning',
						position: "top"
					});
					return;
				}
				this.curFiled = 'gradeId'
				
				this.pickerList = [this.gradeList]
				this.pickerShow = true
			},
			toSelectClass(idx) {
				if (idx != -1) {
					this.curStudent = idx
					
					if (!this.students[this.curStudent].gradeId) {
						this.$refs.uToast.show({
							message: '请先选择所在年级！',
							type: 'warning',
							position: "top"
						});
						return;
					}
				}else{
					
					if (!this.form.gradeId) {
						this.$refs.uToast.show({
							message: '请先选择所在年级！',
							type: 'warning',
							position: "top"
						});
						return;
					}
				}
				this.curFiled = 'classesId'

				if (this.form.userType  == 1) {

					this.pickerList = [this.classList]
				} else {
					this.pickerList = [this.students[this.curStudent].classList]
				}
				this.pickerShow = true
			},
			confirmPicker(e) {
				let item = e.value[0]
				console.log(this.curFiled,item,12345)
				if (this.form.userType  == 1 || this.curFiled=='schoolId') {
					
					this.form[this.curFiled] = item.id
					this.form[this.curFiled + 'Name'] = item.name
				}else{
					
					this.students[this.curStudent][this.curFiled] = item.id
					this.students[this.curStudent][this.curFiled + 'Name'] = item.name
				}
				console.log(this.students,1333)
				this.pickerShow = false
				if (this.curFiled == 'schoolId') {

					if (this.form.userType  == 1) {

						this.form.gradeId = ''
						this.form.gradeName = ''
						this.form.classesId = ''
						this.form.classesIdName = ''

					} else {

						this.students[this.curStudent].gradeId = ''
						this.students[this.curStudent].gradeName = ''
						this.students[this.curStudent].classesId = ''
						this.students[this.curStudent].classesIdName = ''
					}
					this.getGrade()
				}
				if (this.curFiled == 'gradeId') {

					if (this.form.userType  == 1) {
						this.form.classesId = ''
						this.form.classesIdName = ''

					} else {
						this.students[this.curStudent].classesId = ''
						this.students[this.curStudent].classesIdName = ''
					}
					this.getClass()
				}
			},
			getCode() {
				const that = this;
				if (!that.form.mobile) {
					that.$refs.uToast.show({
						message: '请输入手机号！',
						type: 'warning',
						position: "top"
					});
					return;
				};
				if (that.isSending) {
					return
				};


				that.$api.sendCode({
					account: that.form.mobile,
					type: 1,
					methodType: 'get'
				}, res => {
					if (res.code == 200) {

						that.isSending = true;
						//ajax
						that.timer = setInterval(function() {
							if (that.time > 1) {
								that.time--;
							} else {
								that.isSending = false;
								clearInterval(that.timer);
								that.timer = null;
								that.time = 60;
							}
						}, 1000);
					} else {


						that.$refs.uToast.show({
							message: res.message,
							type: 'warning',
							position: "top"
						});
					}
				})
			},
			submit() {
				const that = this;
				
				if (!that.isAggree) {
					that.$refs.uToast.show({
						message: '请阅读相关协议！',
						type: 'warning',
						position: "top"
					});
					return;
				};
				if (!that.form.nickname) {
					that.$refs.uToast.show({
						message: that.form.userType == 1 ? '请输入学生真实姓名！' : '请输入家长真实姓名！',
						type: 'warning',
						position: "top"
					});
					return;
				};
				if (that.form.userType == 1) {
					
					
					if (!that.form.schoolId) {
						that.$refs.uToast.show({
							message: '请选择学生所在学校！',
							type: 'warning',
							position: "top"
						});
						return;
					};
					if (!that.form.gradeId) {
						that.$refs.uToast.show({
							message: '请输入学生所在年级！',
							type: 'warning',
							position: "top"
						});
						return;
					};
					if (!that.form.classesId) {
						that.$refs.uToast.show({
							message: '请输入学生所在班级！',
							type: 'warning',
							position: "top"
						});
						return;
					};
					if (!that.form.studentNo) {
						that.$refs.uToast.show({
							message: '请输入学生学籍号！',
							type: 'warning',
							position: "top"
						});
						return;
					};
					if (!that.form.password) {
						that.$refs.uToast.show({
							message: '请输入密码！',
							type: 'warning',
							position: "top"
						});
						return;
					};
					if (!that.form.confirmPassword) {
						that.$refs.uToast.show({
							message: '请再次输入密码！',
							type: 'warning',
							position: "top"
						});
						return;
					};
					if (that.form.password != that.form.confirmPassword) {
						that.$refs.uToast.show({
							message: '两次密码输入不一致！',
							type: 'warning',
							position: "top"
						});
						return;
					};
				}
				
				if (that.form.userType == 2) {
					that.form.students=that.students
				}
				if (that.form.schoolId) {
					that.form.deptId=that.form.schoolId
				}
				this.$api.verifyRegister(this.form, res => {
					if (res.code == 200) {
						// this.dataInfo = res.data
						// this.$db.set('userToken',res.data.token)
						// if(res.data.schoolList && res.data.schoolList.length>0){

						// 	this.$db.set('deptId',res.data.schoolList[0].id)
						// 	this.$db.set('schoolList',res.data.schoolList)
						// }

						this.$refs.uToast.show({
							message: '注册成功，请等待审核！',
							type: 'warning',
							position: "top"
						});
						setTimeout(()=>{
							uni.reLaunch({
								url: '/pages/home/home'
							})
						},1200)
					} else {
						this.$refs.uToast.show({
							message: res.message,
							type: 'warning',
							position: "top"
						});
					}
				})
				//ajax
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loginBox {
		min-height: 100%;
		display: flex;
		padding: 40rpx 70rpx 60rpx;
		box-sizing: border-box;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;

		.form {
			width: 100%;
			flex: 1 1 auto;
			padding-bottom: 40rpx;

			.ft {
				text-align: center;
				font-size: 36rpx;
				color: #65554d;
				margin-bottom: 40rpx;
			}

			.line {
				display: flex;
				margin-bottom: 24rpx;
				background: #fff;
				height: 90rpx;
				align-items: center;
				border-radius: 90rpx;

				.ico {
					flex: 0 0 auto;
					width: 80rpx;
					text-align: center;

					image {
						width: 24rpx;
						height: auto;
						display: block;
						margin: auto;
					}
				}

				.in {
					flex: 1 1 auto;
					overflow: hidden;

					input {
						width: 100%;
						height: 90rpx;
						display: block;
						font-size: 24rpx;
						background: none !important;
						border: none !important;
						outline: none !important;
						padding: 0 30rpx;
						box-sizing: border-box;
					}
				}

				.getbtn {
					line-height: 80rpx;
					background: #ffebd4;
					color: #fe9c29;
					padding: 0 26rpx;
					border-radius: 80rpx;
					font-size: 24rpx;
					margin-right: 5rpx;
					flex: 0 0 auto;

					&.gray {
						background: none;
						color: #999;
					}
				}

				.btn {
					flex: 0 0 auto;
					width: 100rpx;
					text-align: center;

					image {
						width: 40rpx;
						display: block;
						margin: auto;
						height: auto;
					}
				}
			}

			.lineBtns {
				margin-top: 80rpx;

				.btn {
					display: block;
					line-height: 88rpx;
					border: 1rpx solid #65554d;
					border-radius: 90rpx;
					text-align: center;
					font-size: 28rpx;
					margin-bottom: 10rpx;

					&.act {
						border-color: #fe9c29;
						background: #fe9c29;
						color: #fff;
					}
				}
			}

			.other {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				margin-top: 30rpx;
				font-size: 28rpx;
				color: #897f7a;

				navigator {
					display: inline;
					padding: 0 !important;
					margin: 0 !important;
					border: none !important;
					opacity: 1 !important;
					outline: none !important;
					background: transparent !important;
					line-height: inherit;
					overflow: visible;
					height: auto !important;
					font-size: inherit !important;

					&.a {
						color: #fe9c29;
						text-decoration: underline;
						margin-left: 10rpx !important;
					}
				}
			}
		}
	}
</style>